<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">
    </script>
    <style>
        table, th, td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
        }
        table tr:nth-child(odd) {
            background-color: #f1f1f1;
        }
        table tr:nth-child(even) {
            background-color: #ffffff;
        }
    </style>
</head>

<body>
    <script>
        var app = angular.module('myApp', []);
        app.controller('tableCtrl', function ($scope) {
            $scope.sites = [
                { site: "Google", url: "www.google.com" },
                { site: "Baidu", url: "www.baidu.com" },
                { site: "Taobao", url: "www.taobao.com" }];
        });
    </script>
    <!-- <div ng-app="myApp" ng-controller="tableCtrl">
        <table>
            <tr ng-repeat="x in sites">
                <td>{{$index + 1}}</td>
                <td>{{ x.site }}</td>
                <td>{{ x.url }}</td>
            </tr>
        </table>
    </div> -->

    <!-- <div ng-app="myApp" ng-controller="tableCtrl">
    <table>
        <tr ng-repeat="x in sites">
            <td ng-if="$odd" style="background-color:#12a526">{{ x.site }}</td>
            <td ng-if="$even">{{ x.site }}</td>
            <td ng-if="$odd" style="background-color:#12a526">{{ x.url }}</td>
            <td ng-if="$even">{{ x.url }}</td>
        </tr>
    </table>
    </div> -->

    <div ng-app="myApp" ng-controller="tableCtrl">
    <table>
        <tr style="{{$even?'background-color: #12a526':''}}" ng-repeat="x in sites">
            <td>{{ x.site }}</td>
            <td>{{ x.url }}</td>
        </tr>
    </table>
    </div>
</body>

</html>